<template>
    <div class="body">
        <div class="info">
            <div class="my_order">
                <div class="my_order_div">
                <span>单位名称:</span>
                <span>
                    {{shopInfo.company_name}}
                </span>
                </div>
            </div>
            <div class="my_order">
                <div class="my_order_div">
                <span>法定代表人:</span>
                <span>
                    {{shopInfo.legal_name}}
                </span>
                </div>
            </div>
            <div class="my_order">
                <div class="my_order_div">
                <span>经营地址:</span>
                <span>
                    {{shopInfo.address}}
                </span>
                </div>
            </div>
            <div class="my_order">
                <div class="my_order_div">
                <span>经营范围:</span>
                <span>
                    <template v-for="i of shopInfo.scope_ids">
                        {{i.name}}
                    </template>
                </span>
                </div>
            </div>
            <div class="my_order">
                <div class="my_order_div">
                <span>有效期至:</span>
                <span>
                    {{shopInfo.cert_validity}}
                </span>
                </div>
            </div>
        </div>
        <div class="info">
            <p class="title">商家资质信息公布</p>
            <div class="img_info">
                <img :src="$store.getters.base_url+shopInfo.cert_pic" @click="showPopup($store.getters.base_url+shopInfo.cert_pic)">
                <img :src="$store.getters.base_url+shopInfo.allow_pic" @click="showPopup($store.getters.base_url+shopInfo.allow_pic)">
            </div>
        </div>
        <mt-popup
        v-model="popupVisible"
        popup-transition="popup-fade">
            <img :src="pic" alt="" class="big_img">
        </mt-popup>
    </div>
</template>
<script>
export default {
    data() {
        return {
            shopInfo:{},
            popupVisible:false,
            pic:""
        }
    },
    created(){
        this.shopInfo = this.$route.query.shopInfo;
        console.log(this.$route.query.shopInfo)
    },
    methods:{
        showPopup(pic){
            this.popupVisible = !this.popupVisible
            this.pic = pic;
        }
    }
}
</script>
<style scoped>
    .body{
        background: #ddd;
        height: Calc(100vh - 3rem)
    }
    .body::before{
        display: table;
        content: "";
    }
    .info{
        width: 90%;
        margin: 1rem auto;
        border-radius: 10px;
        background: #fff;
    }
    .info>a:first-child{
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }
    .info>a:last-child{
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }
    .info::after{
        display: table;
        content: "";
    }
    .img_info{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .info::before{
        content: "";
        display:table;
    }
    .img_info img{
        width: 40%;
        height: 8rem;
        border-radius: 10px;
        padding:1rem;
    }
    .title{
        margin:1rem;
        margin-bottom: 0;
    }
    .mint-popup{
        width: 100%;
    }
    .big_img{
        width: 100%;
    }
</style>